<template>
  <div class="topnav">
    <div class="navleft">
      <a href="" class="logo">
        <img src="@/assets/toolimg/logo.png" alt="" />
      </a>
      <ul class="nav">
        <li
          v-for="(item, index) in navlist"
          @click="addclass(index,item.url)"
          :class="index == qwe ? 'Style' : ''"
          :key="index"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="navright">
      <div class="inputbox">
        <input type="text" placeholder="绘画教程" v-model="inputText" />
        <div class="sousuo" @click="search">搜索</div>
      </div>
      <div class="loginbox">
      
        <router-link to="/login">登录</router-link>
        <span>|</span>
        <router-link to="/register">注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText:'',
      qwe: 0,
      navlist: [
        { name: "首页", url: "/" },
        { name: "专业课", url: "/course" },
        { name: "教程区", url: "/courseZ" },
        { name: "大咖快报", url: "/daka" },
        { name: "社区", url: "/community" },
      ],
    };
  },
  methods: {
    search(){
      this.$router.push({path : "/search", query:{inputText:this.inputText}})
    },
    addclass(index,url) {

      this.qwe = index;
      this.$router.push(url)
      // this.$forceUpdate()
    },
  },
};
</script>
<style scoped lang="scss">
.topnav {
  width: 100%;
  height: 60px;
  display: flex;
  background-color: #ffffff;
  justify-content: space-around;
}
a {
  text-decoration: none;
}
.nav {
  width: 520px;
  height: 60px;
  display: flex;
  justify-content: space-around;
}
.nav a:hover {
  color: #027cdb;
}
.nav a {
  color: #212b34;
}
.navleft {
  width: 730px;
  height: 60px;
  display: flex;
}

.logo {
  line-height: 80px;
}
.logo img {
  width: 197px;
  height: 30px;
}
li {
  list-style: none;
  font-weight: 500;
  line-height: 60px;
  color: #212b34;
}
.navright {
  width: 380px;
  height: 40px;
  margin-top: 10px;
  /* line-height: 40px; */
  display: flex;
  justify-content: space-between;
}
.loginbox {
  line-height: 40px;
  color: #87959f;
}
.loginbox a {
  margin-right: 10px;
  margin-left: 10px;

  font-size: 12px;
  color: #87959f;
}
.inputbox {
  display: flex;
}
.inputbox input {
  width: 220px;
  height: 40px;
  border-radius: 5px 0 0 5px;
  border: none;
  outline: none;
  background-color: #f6f8fa;
  padding-left: 10px;
}
.sousuo {
  font-size: 16px;
  width: 40px;
  height: 40px;
  color: #999999;
  line-height: 40px;
  border-radius: 0 5px 5px 0;
  border: none;
  background-color: #f6f8fa;
}
.Style {
  display: block;
  font-weight: 500;
  line-height: 60px;
  span {
    color: #027cdb !important;
  }
  border-bottom: 2px #027cdb solid;
}
</style>